<template>
  <div>
    <div style="width: 400px; margin: 150px auto;">
      <h1 style="text-align: center; margin-bottom: 30px">登录</h1>
      <el-form :model="user" :rules="rules" size="large" ref="ruleFormRef">
        <el-form-item prop="username">
          <el-input v-model="user.username" :prefix-icon="User"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="user.password" :prefix-icon="Lock" show-password/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 190px" @click="login">登录</el-button>
          <el-button type="primary" style="width: 190px" @click="reg">注册</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog v-model="dialogFormVisible" title="注册" width="40%">
      <el-form :model="state.form" :rules="state.rules" ref="ruleFormRef" style="width: 85%" label-width="120px">
        <el-form-item label="用户名"  prop="username">
          <el-input v-model="state.form.username" autocomplete="off" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item label="密码"  prop="password">
          <el-input v-model="state.form.password" autocomplete="off" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item label="再次输入密码"  prop="password2">
          <el-input v-model="state.form.password2" autocomplete="off" placeholder="请再次输入密码"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          注册
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {getCurrentInstance, reactive, ref} from "vue";
import request from "../../request.js";
import {ElMessage, ElNotification} from "element-plus";
import router from "../../router/index.js";
const {proxy} = getCurrentInstance()
const dialogFormVisible = ref(false)
const rules = reactive({
  username:[
    {required:true, message:'请输入用户名', trigger:'blur'}
  ],
  password:[
    {required:true, message:'请输入密码', trigger:'blur'}
  ]
})
const user = reactive({

})
const state = reactive({
  form:{}
})
const reg = () => {
  dialogFormVisible.value = true
  state.form={}
}
const save = () => {
  if(state.form.password != state.form.password2){
    ElMessage.error("两次密码输入不一致")
  }else{
    request.post("/user2", state.form).then(res => {
      if(res.code == '200'){
        ElMessage.success("注册成功")
        dialogFormVisible.value = false
        router.push('/front/login')
      }else{
        ElMessage.error("注册失败 "+ res.msg)
      }
    })
  }
}
const login = () => {
  request.post("/user2/login", user).then(res => {
    if(res.code == '200'){
      ElNotification.success("登录成功")
      localStorage.setItem('userid', JSON.stringify(res.data.id))
      router.push('/front/main2')
    }else {
      ElNotification.error(res.msg)
    }
  })
}
</script>

<style scoped>

</style>